<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="box"></div>
    <script>
        /*
        1 创建对象 element
            及对象的相关属性设置


        4 将 1中创造的对象，附加到当前页面中

         */



        var boxObj = document.getElementById('box');
        var imgObj = document.createElement('img');//标签名
//        imgObj.width = '100';
//        imgObj.height = '100';
//        imgObj.src = 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1503911173&di=7c770de19ccb61783f8a96dc4cbcced7&imgtype=jpg&er=1&src=http%3A%2F%2Fh.hiphotos.baidu.com%2Fzhidao%2Fpic%2Fitem%2F060828381f30e9240ff2cd434c086e061d95f76a.jpg';
//        imgObj.src = 'https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=1461512776,3902274546&fm=26&gp=0.jpg';
//        imgObj.src = 'https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=3155280771,606419104&fm=26&gp=0.jpg';
//        imgObj.src = 'https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=26671000,2729414830&fm=26&gp=0.jpg';
        imgObj.src = 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1503911950&di=a6f0b39300453487d712d96ca1ed5ff7&imgtype=jpg&er=1&src=http%3A%2F%2Fimg5.duitang.com%2Fuploads%2Fitem%2F201409%2F20%2F20140920163845_d8kMK.jpeg';
        imgObj.onload = function(){
            var oW = imgObj.width;
            var oH = imgObj.height;
            if (oW>oH){
                var newW = 300;
                var newH = newW*oH/oW;
            } else {
                var newH = 300;
                var newW = newH*oW/oH;
            }

//            imgObj.width = newW;
//            imgObj.height = newH;

            this.width = newW;
            this.height = newH;


        }


        box.appendChild(imgObj)

    </script>

</body>
</html>